<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:shiro="shiro.apache.org/tags">
<head>
    <th:block th:include="common/common_head :: commonHeader('报表库')"/>
    <link rel="stylesheet" th:href="@{/static/js/plugins/jquery-layout/jquery.layout-latest.css}">
    <!-- <style type="text/css">.table {table-layout:fixed;}</style> -->
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-condition">
            <form id="reportForm" th:action="@{/reportRepository/list}" class="form-inline">
                <div class="select-list">
                    <ul>
                        <li class="col-sm-3" style="width: 33%">
                            <label>测试报告编号：</label>
                            <input type="text" name="reportCode" />
                        </li>

                        <li class="col-sm-3" style="width: 33%">
                            <label>提交日期(起):</label>
                            <input type="text" name="startDate" id="startDate" autocomplete="off"/>
                        </li>

                        <li class="col-sm-3" style="width: 33%">
                            <label>提交日期(止):</label>
                            <input type="text" name="endDate" id="endDate" autocomplete="off"/>
                        </li>

                        <li class="col-sm-3" style="width: 33%">
                            <label>检测机构：</label>
                            <input type="text" name="testingInstitution" />
                        </li>

                        <li class="col-sm-3" style="width: 33%">
                            <label>报告委托单位：</label>
                            <input type="text" name="consignee" />
                        </li>

                        <li class="col-sm-3" style="width: 33%">
                            <label>生效状态：</label>
                            <select name="valid" sysDict="BGKSXZT" emptyFirst="true"></select>
                        </li>

                        <li class="col-sm-3" style="width: 33%" shiro:hasPermission="report:vendor">
                            <label>供应商名称：</label>
                            <input type="text" name="vendorName" autocomplete="off">
                        </li>

                        <li class="col-sm-3">
                            <button id="reportSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i
                                    class="fa fa-search"></i>&nbsp;搜索
                            </button>
                            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置
                            </button>

                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info order-table">
            <div class="btn-group hidden-xs toolbar" id="reportToolBar" role="group">
                <a class="btn btn-outline btn-success btn-rounded" onclick="addReport()"
                   shiro:hasPermission="report:add">
                    <i class="fa fa-plus"></i> 新增
                </a>
            </div>
            <table id="report" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div id="RoHSReportModel" style="display: none">
    <table class="layui-table" style="width:90%;margin: 0 auto">
        <thead style="height: 80px">
        <tr>
            <th colspan="4" style="font-size: 28px;text-align: center;line-height: 40px">RoHS报告明细</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td width="17%">检测机构：</td>
            <td width="33%" id="testingInstitution"></td>
            <td width="17%">测试报告编号：</td>
            <td width="33%" id="reportCode"></td>
        </tr>
        <tr>
            <td>第三方报告委托单位：</td>
            <td id="consignee"></td>
            <td>报告日期：</td>
            <td id="reportDate"></td>
        </tr>
        <tr>
            <td>有效日期至：</td>
            <td id="expireDate"></td>
            <td>附件：</td>
            <td id="attach"></td>
        </tr>
        <tr>
            <td>提交人：</td>
            <td id="submitter"></td>
            <td>提交时间：</td>
            <td id="submitDate"></td>
        </tr>
        <tr>
            <td>原测试报告编号:</td>
            <td id="originalReportCode" colspan="3"></td>

        </tr>
        </tbody>
    </table>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeDialog()">关闭</button>
    </div>
</div>

<!--shiro不能在js中生效-->
<div id="permissionDiv" style="display: none;">
    <a id="update" class="btn btn-outline btn-success btn-rounded" shiro:hasPermission="report:update">更新</a>
    <a id="nullify" class="btn btn-outline btn-success btn-rounded" shiro:hasPermission="report:nullify">作废</a>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<script type="text/javascript">

    $(function () {
        // 初始化时间插件
        laydate.render({elem: '#startDate'});
        laydate.render({elem: '#endDate'});
        //初始化所有字典数据
        initDictDataSel();
    });

    var searcherBS = Searcher.createBS('#report',
        [
            {title: '第三方报告委托单位 ', field: 'consignee'},
            {title: '检测机构', field: 'testingInstitution'},
            {
                title: '测试报告编号', field: 'reportCode',
                formatter: function (value, row, index) {
                    value = '';
                    value += '<a href="#" style="color: blue" onclick="fun(' + index + ')">' + row.reportCode + '</a>';
                    return value;
                }
            },
            {title: '报告日期', field: 'reportDate'},
            {title: '有效期至', field: 'expireDate'},
            {
                title: '是否有效', field: 'valid',
                formatter: function (value, row, index) {
                    if (value == 0) {
                        return "有效";
                    } else if (value == 2) {
                        return "预警中";
                    } else if (value == -1) {
                        return "作废";
                    } else if (value == -2) {
                        return "无效";
                    }
                }
            },
            {title: '原测试报告号', field: 'originalReportCode'},
            {title: '供应商', field: 'vendorName'},
            {title: '提交人', field: 'submitter'},
            {title: '提交时间', field: 'submitDate'},
            {
                title: "操作", field: '',
                formatter: function (value, row, index) {
                    value = '';
                    //当前用户有权限且报告状态为有效或待更新
                    if ($("#permissionDiv").find('a').length > 0 && row.valid == 2) {
                        $("#update").attr("onclick", "updateReport('" + row.pkId + "')");
                        value += $("#update").prop("outerHTML");
                    }
                    if ($("#permissionDiv").find('a').length > 0 && (row.valid == 0 || row.valid == 2)) {
                        $("#nullify").attr("onclick", "nullifyReport('" + row.pkId + "')");
                        value += $("#nullify").prop("outerHTML");
                    }
                    return value;
                }
            }
        ]
    );

    /**
     * 查询数据
     */
    function refresh() {
        searcherBS.refresh();
    }

    /**
     * 关闭模态框
     */
    function closeDialog() {
        layer.closeAll();
    }

    /**
     * 新增报告
     */
    function addReport() {
        var index = Dialog.openUrl("新增", ctxPath + '/modules/harmful/rohs/report_add.html', {
            area: ['900px', '700px'],
            maxmin: true,
            end: function () {
            }
        });
        layer.full(index);
    }

    /**
     * 查看详情
     */
    function fun(index) {
        var rowData = $("#report").bootstrapTable("getData")[index];
        $("#testingInstitution").text(rowData.testingInstitution);
        $("#reportCode").text(rowData.reportCode);
        $("#reportDate").text(rowData.reportDate);
        $("#consignee").text(rowData.consignee);
        $("#expireDate").text(rowData.expireDate);
        var fileDir = rowData.attach;
        var suffix = fileDir.substr(fileDir.lastIndexOf("."));
        var prefix = fileDir.substring(0, fileDir.indexOf("_")).trim();
        prefix = prefix.substr(fileDir.lastIndexOf("/") + 1);
        var attach = prefix + suffix;
        $("#attach").empty().append('<a href="#" onclick="dowloadFileById(\'' + rowData.pkId + '\')"  style="color: blue">' + attach + '</a>');
        $("#submitter").text(rowData.submitter);
        $("#submitDate").text(rowData.submitDate);
        $("#originalReportCode").text(rowData.originalReportCode);
        Dialog.open("详情", $("#RoHSReportModel"), {area: ['1000px', '500px']});
    }

    /**
     **根据id下载报告文件
     **
     **/
    function dowloadFileById(id) {
        window.location.href = ctxPath + "/reportRepository/downloadFileById?id=" + id;
    }

    /**
     * 更新报告
     * @param pkId
     */
    function updateReport(pkId) {
        var index = Dialog.openUrl("更新报告", ctxPath + '/reportRepository/updateReport/' + pkId, {
            area: ['900px', '700px'],
            maxmin: true
        });
        layer.full(index);
    }

    /**
     * 作废报告
     * @param pkId
     */
    function nullifyReport(pkId) {
        Dialog.confirm("确认作废吗？", function () {
            Page.ajaxGET(ctxPath + "/reportRepository/nullifyReport", {"pkId": pkId}, function (data) {
                if (data.code == 0) {
                    Dialog.msg("操作成功！");
                    refresh();
                } else {
                    Dialog.errorMsg("操作失败，请重试！");
                }
            }, {"loadingMsg": "正在处理……"});
        });
    }
</script>

</body>
</html>